<template>
  <ul class="root">
    <li class="data"
        v-for="(city, index) of dataList"
        :key="index"
        @click="clickHandler"
        :class="{'border-none': isNoBorder(index)}"
    >{{city}}</li>
  </ul>
</template>

<script>
export default {
  name: 'OneFourth',
  data () {
    return {
      flag: false
    }
  },
  props: {
    dataList: {
      type: Array,
      required: true,
      default () {
        return []
      }
    }
  },
  methods: {
    clickHandler (event) {
      this.$emit('click', event.target.innerText)
    },
    isNoBorder (index) {
      if (this.dataList.length % 4) {
        return index >= this.dataList.length - this.dataList.length % 4
      } else {
        return index >= this.dataList.length - 4
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.root
  position: relative
  &:before
    position: absolute
    content: ''
    top: 0
    left: 25%
    width: 25%
    height: 100%
    border-left: .02rem solid #ddd
    border-right: .02rem solid #ddd
  ::after
    position: absolute
    content: ''
    top: 0
    left: 50%
    width: 25%
    height: 100%
    border-right: .02rem solid #ddd
  .data
    color: #212121
    font-size: .28rem
    height: .9rem
    width: 25%
    line-height: .9rem
    text-align: center
    background: #fff
    display: inline-block
    border-bottom: .02rem solid #ddd
    margin-bottom: -1px
    ellipsis()
  .border-none
    border-style: none
</style>
